<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="${basePath}assets/bootstrap/css/bootstrap.css"/>
<link href="${basePath}assets/css/basic.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="${basePath}assets/css/list.css"/>
<link rel="stylesheet" href="${basePath}assets/css/login.css"/>
<script type="text/javascript" src="${basePath}assets/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${basePath}assets/js/header.js"></script>
<script type="text/javascript" src="${basePath}assets/js/util.js"></script>
<script type="text/javascript" src="${basePath}assets/layer/layer.js"></script>
<script src="${basePath}assets/rotate/jquery.rotate.min.js"></script>
<link href="${basePath}assets/css/CatalogManage.css" rel="stylesheet" type="text/css"><%--
<link href="${basePath}/static/layer/layer_defined.css" rel="stylesheet" type="text/css"> --%>
</head>
<body>
    <div class="file_manage">

    <div class="file_title">
    	<c:if test="${not empty hospitalizationNotes }">
    		<h3>${hospitalizationNotes[0].patient_name}&nbsp;&nbsp;${hospitalizationNotes[0].out_hospital_date}&nbsp;&nbsp;${hospitalizationNotes[0].id_number}&nbsp;&nbsp;</h3>
    	</c:if>

    	<form action="${basePath}medical_record_scan/paginationMedrecordImages" hidden="true" id="paginationForm">
    		<input type="hidden" id="firstGuid" name="visitGuid" value="${visitGuid }">
    		<input type="hidden" id="paginationStatus" name="paginationStatus" value=""/>
    	</form>
        <input type="hidden" id="firstGuidHidden" value="${visitGuid}">
        <ul style="width:90px;">
            <!--<li><a>类型</a></li>-->

            <li><a onclick="addPageStatus()" id="closeBtn2">编页完成</a>  <!-- <a onclick="custom_close()" id="closeBtn2">关闭</a> --></li>
        </ul>
    </div>
    <div class="fileContent clearfix">
        <div class="fileContent-left">
            <div class="file_header">
                <div class="left">文件信息&nbsp;&nbsp;
                <select onchange="paginationShow()" id="pagination" style="width:80px;" class="input_box">

                	<c:if test="${paginationStatus==1}">
                		<option selected="selected" value="1">未编页</option>
                		<option value="2">已编页</option>
                	</c:if>
                	<c:if test="${paginationStatus==2}">
                		<option  value="1">未编页</option>
                		<option selected="selected" value="2">已编页</option>
                	</c:if>


                </select></div>
                <div class="right">总页数:&nbsp;<span id="totalFileCount">0</span>&nbsp;&nbsp; 未编页 &nbsp;<span id="unPaginationSpan">0</span></div>
            </div>
        <!--<h4 style="height:35px;line-height: 35px;width:965px;margin:0 0 5px;background:#e3e5e4;padding-left:25px;">文件对照信息</h4>-->
            <div class="filePage" id="filepage" style="height:1200px;">
                <ul >
                	<c:forEach var="scanFile" items="${scanFiles }" varStatus="status">
                		<c:choose>
               				<c:when test="${not empty scanFile.mr_page_type_id}">
               					<li style="position:relative" id="${ scanFile.fileHash}" style="border-color: green;position:relative" sort_index= ${scanFile.sortIndex} data-index="${scanFile.dataIndex }" data-filename="${scanFile.mr_page_type_id }" file-hash="${ scanFile.fileHash}" mr-page_type_id ="${ scanFile.mr_page_type_id}">
                					<c:choose>
               							<c:when test="${ scanFile.status==1}">
                							<input checked="checked" class="check_cl" file-hash="${ scanFile.fileHash}"  onclick="changePrintStatus(this)" style="position:absolute;top:0;right:0" type="checkbox" class="check_cl" name="">
		                				</c:when>
               							<c:otherwise>
               								<input class="check_cl"  file-hash="${ scanFile.fileHash}" onclick="changePrintStatus(this)"   style="position:absolute;top:0;right:0" type="checkbox" class="check_cl" name="">
               							</c:otherwise>
               						</c:choose>
		                			<img src="${hospitalizationNoteResourceUrl}${scanFile.fileUrl}${scanFile.fileName}" alt=""/>
		                			<div style="position:absolute;top:0;right:4%;"><a class="int" onclick="deleteImg(this)">删除</a></div>
		                			<div style="position:absolute;top:0;right:9%"><a class="int" imgpath="${scanFile.fileUrl}${scanFile.fileName}"  onclick="rotateImg(this)">翻转</a></div>
		                			<div style="position:absolute;top:0;right:14%;"><input style="width:50px;height:20px" type="input" value="${scanFile.sortIndex}"/><a class="int"   onclick="sortImage(this)">序列</a></div>
		                		</li>
		                	</c:when>
               				<c:otherwise>
               					<li style="position:relative" id="${ scanFile.fileHash}" data-filename="0" data-index="10000" sort_index= ${scanFile.sortIndex} file-hash="${ scanFile.fileHash}">

		                			<img src="${hospitalizationNoteResourceUrl}${scanFile.fileUrl}${scanFile.fileName}" alt=""/>
		                			<div style="position:absolute;top:0;right:0;"><a class="int" onclick="deleteImg(this)">删除</a></div>
		                			<div style="position:absolute;top:0;right:5%"><a class="int" imgpath="${scanFile.fileUrl}${scanFile.fileName}"  onclick="rotateImg(this)">翻转</a></div>
		                			<div style="position:absolute;top:0;right:10%;"><input style="width:50px;height:20px" type="input" value="${scanFile.sortIndex}"/><a class="int"   onclick="sortImage(this)">序列</a></div>
		                		</li>
               				</c:otherwise>
               			</c:choose>
                	</c:forEach>
                </ul>
            </div>
        </div>

        <div class="file_menu">
        <div style="width:344px;height:40px;line-height:40px;color:#FFF;background-color:#1190e8;text-align:center;">病案编目管理</div>
        <ul class="clearfix menulist" >
        	<c:forEach var="mrPageType" items="${mrPageTypes}"  varStatus="status">
            	<c:if test="${(mrPageSizes/2) > status.index}">
            	<li class="file_li" style="overflow-y: hidden;" id="m3_${mrPageType.id }" page-type-id="${mrPageType.id }" data-filename="${mrPageType.id }" title="${mrPageType.name}">

	            	<a>${mrPageType.name }
		            	<span id="mrpagetype${mrPageType.id}">
							<c:choose>
								<c:when test="${not empty mrPageTypesOfPaginationMap[mrPageType.id]}">
									${mrPageTypesOfPaginationMap[mrPageType.id].pagination_count}
								</c:when>
								<c:otherwise>0</c:otherwise>
							</c:choose>
						</span>
					</a>
				</li>
				</c:if>
            </c:forEach>

        </ul>

         <ul class="clearfix ul1 menulist" style="height: 1200px;">
        	<c:forEach var="mrPageType" items="${mrPageTypes}" varStatus="status">
            <c:if test="${(mrPageSizes/2) <= status.index}">
            	<li class="file_li" style="overflow-y: hidden;" id="m3_${mrPageType.id }" page-type-id="${mrPageType.id }" data-filename="${mrPageType.id }" title="${mrPageType.name}">
	            	<a>${mrPageType.name }
		            	<span id="mrpagetype${mrPageType.id}">
							<c:choose>
								<c:when test="${not empty mrPageTypesOfPaginationMap[mrPageType.id]}">
									${mrPageTypesOfPaginationMap[mrPageType.id].pagination_count}
								</c:when>
								<c:otherwise>0</c:otherwise>
							</c:choose>
						</span>
					</a>
				</li>
				</c:if>
            </c:forEach>

        </ul>
    </div>
    </div>
</div>
<script>


function changePrintStatus(obj){
	var status= $(obj).prop('checked')==true?1:2;
	var firstguid = $("#firstGuidHidden").val();
 	var filehash =  $(obj).attr("file-hash");

 	//alert(firstguid+"--"+filehash+"--"+status);
 	$.ajax({
 		type:"post",
 		data:{status:status,firstGuid:firstguid,fileHash:filehash},
 		url:"${basePath}/medrecord/updateMedResource",
 		success:function(data){


 		}

 	})

}




$(function(){
	paginationCount();
})

function paginationCount(){
	var firstGuid=$("#firstGuid").val();
	$.ajax({
		type:"post",
		data:{firstGuid:firstGuid},
		url:"${basePath}medical_record_scan/scanFilePaginationCount",
		success:function(data){
			if(data){
				$("#totalFileCount").html(data.scanFileCount);
				$("#unPaginationSpan").html(data.unPaginationFileCount);
			}
		}
	})
}




function paginationShow(){
	var pagination = $("#pagination").val();
	if(pagination==1){
		$("#paginationStatus").val(1);
	}else{
		$("#paginationStatus").val(2);
	}


	$("#paginationForm").submit();
}



function checkNumber(theObj) {
	  var reg = /^[0-9]+.?[0-9]*$/;
	  if (reg.test(theObj)) {
	    return true;
	  }
	  return false;
	}


	function sort_li(a, b){
		var sortIndexB =$(b).attr('sort_index');
		var sortIndexA =$(a).attr('sort_index');
		var dataIndexB=$(b).attr('data-index');
		var dataIndexA=$(a).attr('data-index');

		if((dataIndexB ==  dataIndexA)){
			if(checkNumber(sortIndexB) && checkNumber(sortIndexA)){
				 return Number(sortIndexB) < Number(sortIndexA) ? 1 : -1;
			}
		}


        return Number($(b).attr('data-index')) < Number($(a).attr('data-index')) ? 1 : -1;    //升序排列
    }
   /*  $("#filepage li").sort(sort_li) // sort elements   JS的sort()方法
            .appendTo('#filepage'); */
	$(function(){
	//获取图片列表
    var filepage=$("#filepage li");
    filepage.sort(sort_li)
            .appendTo('#filepage ul');

    //获取编目菜单列表
    var menulist=$(".menulist li");
    //获取未编页图片列表
    var unPaginationFile=$("#filepage li[data-filename='0']");
    $("#unPaginationSpan").html(unPaginationFile.length);
    //定义未点击的图片
//    var filename,menuname;

    //点击图片列表
    $.each(filepage,function(i,item){
        $(item).on("click",function(){
            $(this).css("border-color","red").siblings().css("border-color","#ccc");//当前活动图片加红色边框,其他兄弟边框还是默认灰色
           $(this).siblings("[mr-page_type_id]").css("border-color","green");
           var checkedImages = $("#filepage li[checked='checked']");
          //  for ( var int = 0; int < checkedImages.length; int++) {

			//}
            filepage.removeAttr("checked");
           	$(this).attr("checked","checked");
           	$(".menulist li").css("background","#F7F8F8");
           	var mr_page_type_id =$(this).attr("mr-page_type_id");
           	$(".menulist li[page-type-id='"+mr_page_type_id+"']").css("background","#a6c9e2");

//            filename=$(this).attr("data-filename")
        })
    })

    //点击菜单绑定列表
    $.each(menulist,function(i,item){
        $(item).on("click",function(){
          $(this).css("background","#a6c9e2").siblings().css("background","#F7F8F8");//当前活动菜单加橘黄色背景，其他的还是默认灰色背景

          var checkedImage = $("#filepage li[checked='checked']");
          if(checkedImage.length != 0){
          	var currentImage = checkedImage.get(0);
          	var firstguid = $("#firstGuidHidden").val();
         	var mrpagetypeid =  $(this).attr("page-type-id");
         	var filehash = currentImage.getAttribute("file-hash");
         	var oldmrpagetypeid = currentImage.getAttribute("mr-page_type_id");

         	$.ajax({
				type:"post",
				url:"${basePath}/medical_record_scan/paginationMedrecordImage",
				data:{firstGuid:firstguid,fileHash:filehash, mrPageTypeId:mrpagetypeid,oldMrPageTypeId:oldmrpagetypeid},
				success:function(data){
					if(data!=null && data.success == true){
						var mrpagetypeObj = data.data[mrpagetypeid];
						if(mrpagetypeObj != null){
							$("#mrpagetype"+mrpagetypeid).html(mrpagetypeObj.pagination_count);
						}else{
							$("#mrpagetype"+mrpagetypeid).html("0");
						}
						if(oldmrpagetypeid != null){

							var oldmrpagetypeObj = data.data[oldmrpagetypeid];
							if(oldmrpagetypeObj != null){
								$("#mrpagetype"+oldmrpagetypeid).html(oldmrpagetypeObj.pagination_count);
							}else{
								$("#mrpagetype"+oldmrpagetypeid).html("0");
							}
						}
						currentImage.setAttribute("mr-page_type_id",""+mrpagetypeid);
						currentImage.setAttribute("data-filename",""+mrpagetypeid);
						currentImage.setAttribute("data-index",""+mrpagetypeid);
						checkedImage.removeAttr("checked");
						checkedImage.css("border-color","green");
						var unPaginationFile=$("#filepage li[data-filename='0']");
				    	$("#unPaginationSpan").html(unPaginationFile.length);
				    	$("#filepage ul li").sort(sort_li).appendTo('#filepage ul');

				    	var pagination = $("#pagination").val();
				    	if(pagination==1){
				    		$("#"+data.stateMessage).hide();
				    		paginationCount();
				    	}

				    	 window.location.reload();


					}else{
						alert("病案编页失败！");
					}

				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					 alert(XMLHttpRequest.status);
					 alert(XMLHttpRequest.readyState);
					 alert(textStatus);
				}
			});

          }
          else{
          	 var menuname=$(this).attr("data-filename");
          	 var current_index = 0;
			 $.each(filepage,function(i,item){
                /*判断li中data-filename是否跟menuname一样*/
                if($(item).attr("data-filename")==menuname){
                	if(current_index == 0){
                		/*获取该标签距离顶部的高度*/
	                    var $objTop=$(item)[0].offsetTop;
	                    /*获取文件图片第一个li的offsetTop*/
	                    var $firstTop=$(filepage).get(0).offsetTop;
	                    /*当前li要滚动的总高度*/
	                    var h=$objTop-$firstTop;
	                    $(".filePage").animate({
	                     scrollTop: h
	                     },500);
	                     current_index = 1;
                	}
                }
            })
          }
        });
    });
	});


    function addPageStatus(){
    	var firstGuid = $("#firstGuidHidden").val();
    	$.ajax({
    		type:"post",
    		url:"${basePath}/medrecord/addPaginationTreatementTrace",
    		data:{firstGuid:firstGuid},
    		success:function(data){
    			var name = $("#name").val();
     			var idCard = $("#idCard").val();
     			var outHospitalStartDate = $("#outHospitalStartDate").val();
     			var outHospitalEndDate = $("#outHospitalEndDate").val();
     			var mrId =$("#mrId").val();
     			var visitNumber = $("#visitNumber").val();
     			var currentPage = $("#currentPage").val();
     			window.location.href="${basePath}/medrecord/queryPaginationMedrecordImage?name="+name+"&idCard="+idCard+"&outHospitalStartDate="+outHospitalStartDate+"&outHospitalEndDate="+outHospitalEndDate+"&mrId="+mrId+"&visitNumber="+visitNumber+"&currentPage="+currentPage+"&paginationStatus=1";
    		}
    	})
    }

    function rotateImg(obj){
    	layer.confirm("您确认要对当前图片进行翻转操作吗?请确认!", {
            btn : [ '确认翻转', '取消翻转' ]//按钮
        }, function(index) {

        	var $this = $(obj);
        	var $li = $this.closest("li");
        	var $img = $li.find("img");
        	var imagePath =$this.attr("imgpath");
        	var angle = 180;
        	layer.close(index);
        	$.ajax({
        		type:"post",
        		data:{imagePath:imagePath,angle:angle},
        		url:"${basePath}/image/imageRotate",
        		success:function(data){

        			if(data.success){
        				$img.rotate({ angle:0,animateTo:angle,easing: $.easing.easeInOutExpo });
        				//window.location.reload();
        			}

        		}

        	})

        });


    }

    function sortImage(obj){
    	layer.confirm("您确认要修改图片顺序吗?请确认!", {
            btn : [ '确认', '取消' ]//按钮
        }, function(index) {
        	var $this = $(obj);
        	var $li = $this.closest("li");
        	var fileHash = $li.attr("id");
        	var $input = $this.prev();
        	var sortIndex = $input.val();
        	layer.close(index);
        	if(sortIndex==null || sortIndex=="" || sortIndex==undefined){
        		 layer.alert('序列不能为空!',{icon:1});
        		return;
        	}

        	$.ajax({
        		type:"post",
        		data:{fileHash:fileHash,sortIndex:sortIndex},
        		url:"${basePath}medical_record_scan/imgSort",
        		success:function(data){
        			paginationShow();
        		}
        	});
        });

    }


    function deleteImg(obj){
    	layer.confirm("您确认要删除当前图片吗?请确认!", {
            btn : [ '确认删除', '取消删除' ]//按钮
        }, function(index) {
        	var $this = $(obj);
        	var $li = $this.closest("li");

        	var fileHash = $li.attr("id");
        	var firstGuid = $("#firstGuidHidden").val();
        	//alert(fileHash+"--"+firstGuid);
        	$.ajax({
				type:"post",
				url:"${basePath}/medical_record_scan/removeMedrecordImage",
				data:{firstGuid:firstGuid,fileHash:fileHash},
				success:function(data){
					if(data!=null && data.success == true){
						$li.remove();
						//$("#totalPage").html(data.data);
						paginationShow();

					}else{
						 layer.alert('删除失败!',{icon:7});
					}
				}
			});

        });
    }

</script>
</body>
</html>
